<template>
    <span class="IntervalNumber">{{run_num}}</span>
</template>

<script>
export default {
    props: {
        "runnum": {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            run_num: this.runnum,
            timeTicket: null,
        }
    },
    mounted(){
        let time = 500 //ms 数字滚动总时间
        let delayTime = 30 // ms 数字滚动间隔时间
        let divisions = time / delayTime //滚动次数
        this.asyncPrint(this.run_num, divisions, delayTime)
    },
    methods:{
        timeOut(ms) {
            return new Promise((resolve) => {
                this.timeTicket = setTimeout(resolve, ms)
            })
        },
        async asyncPrint(value, divisions, ms){
            for(let i=0; i< divisions; i++){
                try {
                    await this.timeOut(ms);
                } catch (err) {
                    console.log(err)
                }
                this.run_num = Math.round(value / divisions * i);
            }
            this.run_num = this.runnum
            clearTimeout(this.timeTicket)
            this.timeTicket = null
        }
    }
}
</script>

<style>

</style>